知识篇 -- Vue3状态管理：拥抱Pinia，轻量高效的Store

Ray Shine 2024/6/30 Vue3进阶知识状态管理

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在Vue3应用中，状态管理是构建大型复杂应用不可或缺的一部分。虽然Vuex在Vue2时代是官方推荐的状态管理库，但随着Vue3的发布，Pinia 逐渐成为新的官方推荐状态管理库。Pinia以其轻量、直观、类型安全和模块化的设计，为Vue3应用提供了更优秀的开发体验。

# 什么是Pinia？

Pinia是一个Vue的Store库，它允许你跨组件/页面共享状态。它与Vuex类似，但设计上更简洁、更符合Vue3的Composition API风格，并且提供了更好的TypeScript支持。

Pinia的核心优势：

轻量化：核心代码体积非常小。
类型安全：完全支持TypeScript，提供自动类型推断，减少手动类型注解。
模块化：默认就是模块化的，每个Store都是独立的，无需嵌套模块。
直观的API：API设计简洁明了，易于学习和使用。
无需Mutation：直接修改State，简化了状态变更流程。
Devtools支持：提供强大的Vue Devtools集成，方便调试。

# Pinia与Vuex的对比

特性	Pinia	Vuex (4.x for Vue3)
API风格	更接近Composition API，函数式	选项式API，对象配置
Mutation	无Mutation，直接修改State	必须通过Mutation修改State
模块化	默认模块化，每个Store独立	需要手动配置Modules，可能存在命名空间问题
TypeScript	更好的类型推断和支持	需要额外的类型声明和辅助函数
包体积	更小，支持摇树优化	相对较大
学习曲线	更平缓，更直观	相对陡峭，概念较多
性能	理论上更优，但实际差异不大	良好

# Pinia的核心概念详解

# 1. 安装

首先，你需要安装Pinia。

npm install pinia
# 或者
yarn add pinia

# 2. 创建Pinia实例并挂载

在你的Vue应用中，创建Pinia实例并将其挂载到Vue应用上。

main.js：

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia); // 挂载Pinia
app.mount('#app');

# 3. 定义Store

使用 defineStore 函数来定义一个Store。每个Store都是一个独立的模块。

stores/counter.js：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  // State：定义应用的状态
  state: () => ({
    count: 0,
    name: 'Eduardo'
  }),

  // Getters：从State派生出一些状态，类似于计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
    // Getter也可以访问其他Getter
    doubleCountPlusOne(): number {
      return this.doubleCount + 1;
    }
  },

  // Actions：定义修改State的方法，可以包含异步操作
  actions: {
    increment() {
      this.count++; // 直接修改State
    },
    async incrementAndSayHi() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.count++;
      console.log('Count incremented asynchronously!');
    }
  }
});

# 4. 在组件中使用Store

在Vue组件中，通过调用 useStore 函数来使用Store。

MyComponent.vue：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment()">Increment</button>
    <button @click="counter.incrementAndSayHi()">Increment Async</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter';

const counter = useCounterStore(); // 获取Store实例
</script>

# 5. 直接修改State

Pinia允许你直接修改State，而无需像Vuex那样通过Mutation。

counter.count++; // 直接修改
counter.$patch({ // 批量修改
  count: counter.count + 1,
  name: 'John Doe'
});
counter.$patch((state) => { // 使用函数批量修改
  state.count++;
  state.name = 'Jane Doe';
});

# 6. Store的模块化

Pinia默认就是模块化的，每个 defineStore 创建的都是一个独立的Store。这意味着你不需要像Vuex那样手动配置 modules 选项，也不用担心命名空间的问题。

示例：

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null
  }),
  actions: {
    async fetchUser(id) {
      // 模拟API请求
      const response = await new Promise(resolve => setTimeout(() => resolve({ id, name: 'Test User' }), 500));
      this.userInfo = response;
    }
  }
});

在组件中可以同时使用多个Store：

<script setup>
import { useCounterStore } from '../stores/counter';
import { useUserStore } from '../stores/user';

const counter = useCounterStore();
const user = useUserStore();
</script>

# 总结

Pinia作为Vue3官方推荐的状态管理库，凭借其轻量、直观、类型安全和模块化的设计，极大地简化了Vue3应用中的状态管理。它解决了Vuex在TypeScript支持和模块化方面的痛点，提供了更符合现代前端开发习惯的API。拥抱Pinia，将帮助你构建出更健壮、更易于维护、更具扩展性的Vue3应用。

← Vue3 对比 Vue2 新特性与优势 Vue3 组件通信 →

一ξひβθ光 i